import React from 'react'
import { t } from  '/imports/i18n'
import { useState, useEffect } from 'react'
import Spinner from './Spinner'
import clsx from 'clsx'
import { THEME } from '../constants'
import { Theme } from '../element/types'

export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({ delay, theme }) => {
  const [isWaiting, setIsWaiting] = useState(!!delay)

  useEffect(() => {
    if (!delay) {
      return
    }
    const timer = setTimeout(() => {
      setIsWaiting(false)
    }, delay)
    return () => clearTimeout(timer)
  }, [delay])

  if (isWaiting) {
    return null
  }

  return (
    <div
      className={clsx('LoadingMessage', {
        'LoadingMessage--dark': theme === THEME.DARK
      })}
    >
      <div>
        <Spinner />
      </div>
      <div className='LoadingMessage-text'>{t('labels.loadingScene')}</div>
    </div>
  )
}
